<template>
  <div>
    <!-- 选择地址 -->
    <a-modal v-model="visible" title="收货地址列表" :centered="true" width="1000px" destroyOnClose @ok="handleAddress" @cancel="closeAddress">
      <a-radio-group v-model="addsValue" @change="addsChange" style="width:100%;">
        <a-list item-layout="horizontal" :data-source="addressList">
          <a-list-item slot="renderItem" slot-scope="item">
            <a-row align="middle" justify="center" style="width:100%;">
              <a-col :span="3">
                <a-radio :value="item.id">{{ item.contactName }}</a-radio>
              </a-col>
              <!-- <a-col :span="3">{{ item.contactName }}</a-col> -->
              <a-col :span="2">{{ item.province }}</a-col>
              <a-col :span="2">{{ item.city }}</a-col>
              <a-col :span="2">{{ item.district }}</a-col>
              <a-col :span="9">{{ item.address }}</a-col>
              <a-col :span="3">{{ item.contactPhone }}</a-col>
              <a-col :span="1"><a-icon type="edit" style="color: #1890ff;cursor: pointer;font-size:18px;" @click="editAddress(item)"/></a-col>
              <a-col :span="2"><span v-if="item.logDefault == 1">默认地址</span></a-col>
            </a-row>
          </a-list-item>
        </a-list>
      </a-radio-group>
    </a-modal>
    <!-- 编辑地址 -->
    <a-modal :visible="visibleEdit" title="编辑地址" :centered="true" @ok="handleEdit" @cancel="closeEdit">
      <a-form>
        <a-form-item label="姓名" required>
          <a-input v-model="editAdds.contactName" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="联系电话" required>
          <a-input v-model="editAdds.contactPhone" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="省市区" required>
          <a-cascader :options="pcaOptions" :value="pcaDefault" placeholder="请选择省市区" @change="pcaChange" />
        </a-form-item>
        <a-form-item label="详细地址" required>
          <a-input v-model="editAdds.address" placeholder="请输入详细地址" />
        </a-form-item>
        <a-form-item>
          <a-checkbox @change="checkDefault" :checked="editAdds.logDefault == 1 ? true : false">
            设为默认地址
          </a-checkbox>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { selectLogistics, getAreaData, saveLogistic } from '@/api/box/workbench'
export default {
  props: {
    userInfo: {
      type: Object,
      default: null
    },
    unionId: {
      type: String,
      default: ''
    },
    visibleAddList: {
      type: Boolean,
      default: false
    },
    defLogistic: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      visible: false,
      addressList: [],
      addsValue: '',
      currAddsId: '',
      visibleEdit: false,
      editAdds: {},
      pcaOptions: [],
      pcaDefault: []
    }
  },
  watch: {
    visibleAddList(value, oldvalue) {
      if (value) {
        this.visible = value
        this.fetchAddressList()
      }
    }
  },
  methods: {
    // 查看顾客地址列表
    fetchAddressList() {
      selectLogistics(this.unionId)
        .then(res => {
          if (res.code === 0) {
            this.addressList = res.data
            this.addsValue = this.defLogistic.id
            this.currAddsId = this.defLogistic.id
          } else {
            this.$message.error(res.data)
          }
        })
        .catch(err => {
          console.log('查看顾客地址列表:' + err)
        })
    },
    // 选择地址
    addsChange(e) {
      // console.log(e.target.value)
      this.currAddsId = e.target.value
    },
    // 确定选中地址
    handleAddress() {
      const result = this.addressList.filter(item => item.id === this.currAddsId)
      // this.defLogistic = result[0]
      this.visible = false
      this.$emit('closeAddress', false)
      this.$emit('newAddress', result[0])
    },
    // 取消关闭选择地址
    closeAddress() {
      const result = this.addressList.filter(item => item.id === this.currAddsId)
      this.$emit('newAddress', result[0])
      this.visible = false
      this.$emit('closeAddress', false)
    },
    // 省市区数据
    getAreaData() {
      return getAreaData()
        .then(res => {
          return res
        })
        .catch(err => {
          console.log('省市区数据:' + err)
        })
    },
    // 编辑地址
    async editAddress(item) {
      if (this.pcaOptions.length === 0) {
        const result = await this.getAreaData()
        if (result.code === 0) {
          this.pcaOptions = result.data
        } else {
          this.$message.error(result.msg)
        }
      }
      this.editAdds = JSON.parse(JSON.stringify(item))
      this.visibleEdit = true
      this.pcaDefault = [item.province, item.city, item.district]
    },
    // 设置默认地址
    checkDefault(e) {
      // console.log(`checked = ${e.target.checked}`)
      this.editAdds.logDefault = e.target.checked ? 1 : 0
    },
    // 编辑地址确定
    handleEdit() {
      if (this.editAdds.contactName && this.editAdds.contactPhone && this.editAdds.address && this.pcaDefault.length > 0) {
        const data = {
          requestData: {
            address: this.editAdds.address,
            city: this.pcaDefault[1],
            contactName: this.editAdds.contactName,
            contactPhone: this.editAdds.contactPhone,
            district: this.pcaDefault[2],
            id: this.editAdds.id,
            logDefault: this.editAdds.logDefault,
            province: this.pcaDefault[0]
          },
          user_id: this.userInfo.id
        }
        saveLogistic(data)
          .then(res => {
            if (res.code === 0) {
              this.$message.success('编辑成功！')
              this.closeEdit()
              this.fetchAddressList()
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch(err => {
            console.log('编辑地址确定：' + err)
          })
      } else {
        this.$message.error('请填写全部地址信息！')
      }
    },
    // 关闭地址编辑
    closeEdit() {
      this.visibleEdit = false
      this.editAdds = {}
      this.pcaDefault = []
    },
    // 变更省市区
    pcaChange(value) {
      console.log(value)
      this.pcaDefault = value
    }
  }
}
</script>
